//修改支付密码弹窗

import React, { useState, useEffect } from 'react';
import { Button, Descriptions, Modal, message } from 'antd';
import { ExclamationCircleOutlined } from '@ant-design/icons';
import CommonModal from '@/components/CommonModal';
import IconFont from '@/components/IconFont';
import CommonLoading from '@/components/CommonLoading';
import styles from './CardMessage.module.less';
import { getBankCard, relieveCard } from '../../service';

const { confirm } = Modal;

export default ({ bigAccount, CardSwitch, pageInit, CardClose, personageMessage }) => {

  // loading
  const [spinning, setpinning] = useState(false);
  // 银行卡信息
  const [cardMessage, setCardMessage] = useState({})

  useEffect(() => {
    if (CardSwitch) {
      getCardMessage();
    }
  }, [CardSwitch])

  // 获取银行卡信息
  const getCardMessage = async () => {
    setpinning(true)
    const { success, data } = await getBankCard();
    if (success) {
      setCardMessage(data)
    }
    setpinning(false);
  }

  //解除绑定
  const relieve = () => {
    if(bigAccount == 1){
      confirm({
        title: '提示',
        icon: <ExclamationCircleOutlined />,
        content: '银行卡解绑后不能余额提现，确定要解绑吗？',
        async onOk() {
          const { success, data } = await relieveCard();
          if (success) {
            message.success('银行卡解绑成功')
            CardClose()
            pageInit()
          }
        }
      });
    }else{
      Modal.info({
        content:`系统暂不支持换卡绑定操作，有需求请联系${APP_TITLE}技术`
      })
    }
  }

  return (
    <CommonModal
      title="银行卡信息"
      visible={CardSwitch}
      onCancel={CardClose}
      forceRender={false}
      width={900}
      footer={<Button onClick={CardClose}>关闭</Button>}
    >
        <div className={styles.box}>
          <div className={styles.nameBox}>
            <img src={personageMessage.headImgUrl} alt="" className={styles.photo} />
            <div>
              <p style={{ paddingLeft: '18px' }}> {cardMessage.account} </p>
              <p>
                <IconFont className={styles.zfbicon} type='iconrenzheng' style={{ fontSize: '17px' }}></IconFont>
                绑定 
                <span className='common-color2' style={{ marginLeft: '10px', fontSize: '15px' }} onClick={relieve}>{ bigAccount == 1 ? '解除绑定' : '换卡绑定'}</span>
              </p>
            </div>
          </div>
          <Descriptions title="" column={2}>
            <Descriptions.Item label="持卡人姓名"> {cardMessage.name} </Descriptions.Item>
            <Descriptions.Item label="身份证号"> {cardMessage.idCardNo} </Descriptions.Item>
            <Descriptions.Item label="银行卡号"> {cardMessage.bankNo} </Descriptions.Item>
            <Descriptions.Item label="开户银行"> {cardMessage.openBankName} </Descriptions.Item>
            <Descriptions.Item label="预留手机号"> {cardMessage.mobile} </Descriptions.Item>
          </Descriptions>
        </div>
        <CommonLoading loading={spinning} />
    </CommonModal>
  )
}